<template>
  <ph-view>
    <ph-blockquote type="primary">该组件为独立组件<br/><a href="https://www.npmjs.com/package/ph-loading" target="_blank">npm 地址</a></ph-blockquote>
    <ph-tab>
      <ph-tab-panel title="案例展示">
        <ph-button @click="open(1)">全局</ph-button>
        <ph-pretty>{{ way2 }}</ph-pretty>
        <ph-button @click="open(0)">局部</ph-button>
        <ph-pretty>{{ way1 }}</ph-pretty>
        <ph-loading ref="loading" />
      </ph-tab-panel>
      <ph-tab-panel title="基本介绍">
        <ph-pretty>{{ baseUsage }}</ph-pretty>
      </ph-tab-panel>
    </ph-tab>
  </ph-view>
</template>
<script lang="ts">
import { defineComponent, getCurrentInstance, ref } from "vue";
import { PhLoading, PhGLoading, PhBlockquote, PhButton, PhTab, PhTabPanel, PhView } from "@/index";
import * as Data from "../data/loading";

export default defineComponent({
  components: {
    PhLoading,
    PhBlockquote,
    PhButton,
    PhTab,
    PhTabPanel,
    PhView,
  },
  setup() {
    const loading = ref<InstanceType<typeof PhLoading>>();
    const open = (type: number) => {
      if (type == 1) PhGLoading.show({ closable: true });
      else loading.value?.show({ closable: true });
    };
    return { loading, open, ...Data };
  },
});
</script>
